<template>
  <div class="ind-lznl-manage-index">
    <div class="header">
      <step-nav class="steps" :arrived-idx="arrivedStepIdx" v-model="activedStepIdx">
        <step-item v-for="(item, idx) in navData" :key="item.num" :idx="idx" :disabled="arrivedStepIdx < idx">
          <step-item-ind
            :option="item"
            :actived="activedStepIdx === idx"
            :passed="arrivedStepIdx > idx"
            :arrived="arrivedStepIdx >= idx"></step-item-ind>
        </step-item>
      </step-nav>
    </div>
    <div class="content">
      <AssessObject v-if="activedStepIdx === 0"></AssessObject>
      <AssessAnalysis v-if="activedStepIdx === 1"></AssessAnalysis>
    </div>
  </div>
</template>

<script>
import StepNav from '@com/StepNav/index.vue'
import StepItem from '@com/StepNav/StepItem.vue'
import StepItemInd from './components/NavStepItem.vue'
import AssessObject from './assessObject/index'
import AssessAnalysis from './assessAnalysis/index.vue'
// eslint-disable-next-line no-unused-vars
import { IND_STEP_STATUS, AUDIT_STATUS } from '@utility/dict'
import { mapGetters } from 'vuex'

export default {
  name: 'indLznlManageIndex',
  components: {
    StepNav,
    StepItem,
    StepItemInd,
    AssessObject,
    AssessAnalysis,
  },
  props: {},
  inject: ['operateRoles'],
  data() {
    return {
      navData: [
        {
          num: 1,
          title: '考核对象',
          subTitle: '',
        },
        {
          num: 2,
          title: '统计分析',
          subTitle: '',
        },
      ],
      arrivedStepIdx: 0,
      activedStepIdx: -1, // 当前激活step
      examineStatus: null,
      STEP_SCORE: IND_STEP_STATUS.score,
    }
  },
  computed: {
    ...mapGetters('indReview', ['schemeInfo']),

    schemeId() {
      return this.schemeInfo?.id
    },
  },
  watch: {
    schemeId(val) {
      if (val) {
        this.initIndSteps()
      }
    },
  },
  created() {
    const { step } = this.$route.query
    this.activedStepIdx = step !== undefined ? Number(step) : -1
    this.initIndSteps()
    this.arrivedStepIdx = 2
  },
  methods: {
    initIndSteps() {
      const schemeInfo = this.schemeInfo
      this.examineStatus = schemeInfo.status
      if (this.examineStatus === IND_STEP_STATUS.push) {
        this.arrivedStepIdx = 0
      } else {
        this.arrivedStepIdx = 1
        // if (this.schemeInfo.status === AUDIT_STATUS.passed) {
        //   this.navData[2].subTitle = '（报告已生成）'
        // } else {
        //   this.navData[2].subTitle = '（报告确认中）'
        // }
      }

      const { id } = this.$route.query

      if (id) {
        this.activedStepIdx = 0
      } else if (this.activedStepIdx === -1 || this.activedStepIdx > this.arrivedStepIdx) {
        this.activedStepIdx = this.arrivedStepIdx
      }
    },

    onIndPushEnd() {
      this.examineStatus = IND_STEP_STATUS.score
      this.arrivedStepIdx = 1
      this.activedStepIdx = 1
    },
    onScoreEnd() {
      console.log('%c%s', 'color: #99adcc', 'onScoreEnd')
      this.examineStatus = IND_STEP_STATUS.report
      this.arrivedStepIdx = 2
      this.activedStepIdx = 2
    },
    onReportPassed() {
      this.navData[2].subTitle = '（报告已生成）'
    },
  },
}
</script>

<style lang="scss" scoped>
.ind-lznl-manage-index {
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 1000px;
  .header {
    display: flex;
    background-image: linear-gradient(#f0f0f0, #f0f0f0), linear-gradient(#bfbfbf, #bfbfbf);
    background-position: 0 0, 0 50px;
    background-size: 100% 50px, 100% 1px;
    background-repeat: no-repeat, no-repeat;
    height: 80px;

    .steps {
      flex: 1;
      margin: 10px 0;
      justify-content: flex-start;
      align-items: flex-start;
      width: 800px;
      .step-item-ind {
        margin-left: 20px;
      }
    }
  }
  .content {
    flex: 1;
    overflow: hidden;
    padding: 20px 50px;
  }
}
</style>
